<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客编辑页</title>

  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/edit.css">
  <link rel="stylesheet" href="blog-editormd/css/editormd.css">
  <!-- 引入Bootstrap样式 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link rel="stylesheet" href="css/summary.css">

</head>
<body>
  <div class="nav">
    <img src="pic/smarmot.png" alt="">
    <span class="blog-title">我的博客系统</span>
    <div class="space"></div>
    <a class="nav-span" href="blog_list.html">主页</a>
    <a class="nav-span" href="blog_edit.html">写博客</a>
    <a class="nav-span" href="#" onclick="logout()">注销</a>
  </div>

  <div class="content-edit">

    <div class="push">
      <input type="text" name="" id="title" placeholder="输入文章标题" />
      <input type="button" value="发布文章" id="submit" onclick="promptForSummary()" />
    </div>

    <!-- markdown 插件 html代码 -->
    <div id="editor">
      <textarea style="display: none" id="content" name="content">## 书写博客吧~</textarea>
    </div>

  </div>

  <!-- 对话框 -->
  <div id="summaryModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="closeSummaryModal()">&times;</span>
      <p>请输入文章摘要信息:</p>
      <textarea id="summaryInput" placeholder="输入文章摘要" style="width: 100%; height: 150px;"></textarea> <!-- 修改宽度和高度 -->
      <div id="charCount" class="char-count"></div>
      <button onclick="submitWithSummary()">确定</button>
    </div>
  </div>

  <script src="js/jquery.min.js"></script>
  <script src="blog-editormd/editormd.min.js"></script>
  <script src="js/common.js"></script>
  <script type="text/javascript">
    // 弹出对话框填写摘要信息
    function promptForSummary() {
      document.getElementById("summaryModal").style.display = "block";
    }

    // 关闭摘要对话框
    function closeSummaryModal() {
      document.getElementById("summaryModal").style.display = "none";
    }

    // 提交带摘要的文章
    function submitWithSummary() {
      var summary = document.getElementById("summaryInput").value;
      if (summary.trim() === "") {
        alert("摘要信息不能为空");
        return;
      }
      submit(summary);
      closeSummaryModal();
    }

    // 实时计算输入字数，并显示在对话框中
    document.getElementById("summaryInput").addEventListener("input", function() {
      var maxLength = 200; // 最大允许输入的字符数
      var currentLength = this.value.length;
      var remaining = maxLength - currentLength;
      document.getElementById("charCount").textContent = "字数：" + currentLength + " / " + maxLength;
    });

    $(function () {
      var editor = editormd("editor", {
        width: "100%",
        height: "550px",
        path: "blog-editormd/lib/",
      });
    });

    // 实际提交文章的函数
    function submit(summary) {
      console.log($("#title").val());
      console.log($("#content").val());
      $.ajax({
        type: "post",
        url: "/blog/addBlog",
        data: {
          title: $("#title").val(),
          content: $("#content").val(),
          summary: summary  // 添加摘要信息到提交数据中
        },
        success: function (result) {
          if (result != null && result.code == "SUCCESS" && result.data == "") {
            alert("发布成功!")
            location.href = "blog_list.html";
          } else {
            alert(result.errorMessage);
            return;
          }
        },
        error: function (error) {
          if (error != null && error.status == 401) {
            alert("用户未登录, 登录后再进行对应操作");
          }
        },
      });
    }
  </script>
</body>
</html>
